<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="./Css/self.css">
</head>

<body>
    <div id="app">
        <div id="app">
            <center>
                <div class="outeer" @click.once="outer">
                    <div class="middle" @click.once="middle">
                        <button @click.once="inner">点击我(^_^)</button>
                    </div>
                </div>
                <h1 style="margin-top: 20px;">{{message}}</h1>
                <input type="" @keyup.13='submit()' name="" id="">
                <input type="text" v-on:keydown.f5="prompt()">
            </center>
        </div>
        <script>
            Vue.config.keyCodes.f5 = 116;
            var app = new Vue({
                el: '#app',
                data: {
                    message: '这里是self测试'
                },
                methods: {
                    outer: function() {
                        console.log('outer:这里是外部是事件');
                        this.message = 'outer:这里是外部是事件';
                    },
                    middle: function() {
                        console.log('middle:这里是中间是事件');
                        this.message = 'middle:这里是中间是事件';
                    },
                    inner: function() {
                        console.log('inner:这里是按钮是事件');
                        this.message = 'inner:这里是按钮是事件';
                    },
                    submit: function() {
                        alert('按键提交')
                    },
                    prompt: function() {
                        alert('我是 F5')
                    }
                }
            });
            // Vue.config.keyCode = 13;
        </script>
</body>

</html>